<template>
  <div class="calendar">
    <div class="select">
      <el-select v-model="year" @change="cahngeEvent">
        <el-option
          v-for="(i, index) in yearArr"
          :key="index"
          :label="i"
          :value="i"
        />
      </el-select>
      <el-select v-model="month" @change="cahngeEvent">
        <el-option v-for="item in 12" :key="item" :label="item" :value="item" />
      </el-select>
    </div>
    <el-calendar :value="value">
      <template #dateCell="{date,data}">
        <div style="width:100%;height:100%" @click="changeDate(date, data)">
          {{ data.day.split('-')[2] }}
          <!-- 休字再当前月的周六日才会出现 -->
          <!-- 通过getday可以获取到星期几,通过data.type判断是否是当前月 -->
          <span v-if="isReset(data)">休</span>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script>
export default {
  // 接收父组件传过来的data值,数据类型为复杂数据类型
  //   日历的v-model为这个值
  props: {
    value: {
      type: Date,
      default: () => {
        return new Date()
      }
    }
  },
  data () {
    return {
      year: '2021',
      month: '12',
      yearArr: []
      //   value: new Date()
    }
  },
  //   关联两者的数据关系
  //   如果重父组件传过来时间值,子组件能修改
  //   当修改了日历的值,下拉框上的值也要改变---通过监听的日历的值,下拉框做出不同的变化---watch实现
  //   修改了日历上的年月,去改变日历的值
  //   需求:下拉框的年:根据当前输入的时间前后加减5年
  watch: {
    // 监听传过来的value值,如果传过来的值发生变化,下拉框的年月跟着变动
    value: {
      handler (newValue) {
        this.year = newValue.getFullYear()
        this.month = newValue.getMonth() + 1
        // 获取当前日历的年向前向后加减5
        const minyear = this.year - 5
        const maxyear = this.year + 5
        for (let i = minyear; i <= maxyear; i++) {
          this.yearArr.push(i)
        }
      },
      // immediate表示监听的当前项i第一次监听的时候就触发
      immediate: true
    }
  },
  methods: {
    //   date表示当前点击项的时间
    // date表示当前项的日期xxxx-xx-xx,点击的是否为当前日期以及当前的月的类型:上月下月,当前月
    changeDate (date, data) {
      this.$emit('input', new Date(data.day))
    },
    // 判断休字的出现地方
    isReset (data) {
      const t = new Date(data.day)
      //   判断时间是否是星期六或者星期天
      if (
        data.type === 'current-month' &&
        (t.getDay() === 0 || t.getDay() === 6)
      ) {
        return true
      } else {
        return false
      }
    },
    // 点击修改修改下框的值,修改日历上的日期
    cahngeEvent () {
      // 因为日历上的时间是通过父组件传递过来的,所以只用用this.$emit('event-name', param)修改值
      this.$emit('input', new Date(`${this.year}-${this.month}-01`))
    }
  }
}
</script>

<style lang="scss" scoped>
.calendar {
  // 如果不要导入第三方组件的默认配置项,则配置项设置为display:node就可以了
  ::v-deep .el-calendar__header {
    display: none;
  }
  .select {
    text-align: right;
  }
}
</style>
